<template>
    <div class="right-box" v-if="trainingStore.Roomlist.content?.length>0?true:false">
        <div class="table_paging">
            <table style="width: 100%; min-height: 200px;">
                <tr class="tr-tb" v-for="(item,index) in trainingStore.Roomlist.content" :key="index" @click="toRouter(index)">
                    <td class="first-td">
                        <div class="cell">
                            <div class="img-box"><img :src="item.cover" alt=""></div>
                            <div class="right_info">
                                <div class="ellipsis">{{item.planName}}</div>
                                <div style="font-size: 14px; margin-top: 20px; color: rgb(125, 128, 144);">
                                    已练习{{item.weekTrainedCount}}次{{Math.ceil(item.weekTrainedDuration/1000/60)}}分钟
                                </div>
                            </div>
                        </div>
                    </td>
                    <td class="first-td isright">
                        <div class="cell cell1">
                            <div style="padding-right: 6px; ">
                                <span
                                    style="display: block; width: 50px; cursor: pointer;vertical-align: top;line-height: 20px;">
                                    <Clock v-if="item.weekTrainedCount===0"
                                        style="text-align: center; width: 22px;height:22px;color: #f93684;" />
                                    <Star v-else style="text-align: center; width: 22px;height:22px;color: #f93684;">
                                    </Star>
                                    <p style=" margin-top: 9px; font-size: 14px;color: #7d8090;"
                                        v-if="item.weekTrainedCount===0">未开始</p>
                                    <p style=" margin-top: 9px; font-size: 14px;color: #7d8090;" v-else>进行中</p>
                                </span>
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
            <el-pagination v-model:currentPage="currentPage1" :page-size="pageSize" small
                layout=",->, prev, pager, next" :total="trainingStore.Roomlist.totalElements" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" v-show="trainingStore.Roomlist.totalElements>10" />
        </div>
    </div>
    <div class="none-tip" v-else>
        <img src="https://rs.dance365.com/img/no_content@3x.0fd78ad2.png" alt="">
    </div>
</template>

<script setup lang="ts">
import {
    Search,
    SuccessFilled,
    Clock, Star
} from "@element-plus/icons-vue";
import { ref, onMounted } from 'vue'
import useTrainingStore from '../../../stores/training'
import router from '../../../router/index'
const trainingStore = useTrainingStore()


const currentPage1 = ref(5)
// 总条数
let pageSize = ref(20)
let pageNum = ref(1)
let type = ref('system')
let result = ref([])


const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
    currentPage1.value = val
  
}
const toRouter = (index:number)=>{
    let id = trainingStore.Roomlist.content[index].id
    router.push({path:'/training/detail',query:{id}})
}
</script>

<style scoped>
.clearficx::after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}


.clearficx {
    *zoom: 1;
}

.none-tip {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    height: 600px;
}

.box-right {
    margin: 10px 5px 0 0;
    float: right;
    width: 980px;
    border-radius: 4px;
    margin-bottom: 10px;
}


.right-box {
    min-height: 600px;
    margin-top: 10px;
    background-color: #FFFFFF;
    overflow: hidden;
    margin-bottom: 20px;
    border-radius: 4px;
}


.table_paging {
    margin-bottom: 20px;
    min-height: 700px;
}


.tr-tb {
    font-size: 12px;
    width: 100%;
    border-bottom: 1px solid #ebeef5;
    transition: all .6s;
}
.tr-tb:hover{
    background: #ebeef5;
}
.first-td {
    box-sizing: border-box;
    text-overflow: ellipsis;
    vertical-align: middle;
    position: relative;
    padding: 8px 0;
}

.cell {
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-all;
    line-height: 23px;
    display: flex;
    color: #111;
    padding: 10px 10px;
}

.cell1 {
    text-align: center;
    justify-content: flex-end;
}

.img-box {
    cursor: pointer;
    position: relative;
    width: 169px;
    height: 101px;

}

.img-box img {
    width: 100%;
    height: 100%;
    border-radius: 4px;
}

.right_info {
    padding: 4px 0 0;
    display: flex;
    flex-direction: column;
    padding-left: 17px;
    font-size: 16px;
    color: #111;
}

.ellipsis {
    padding-right: 20px;
    cursor: pointer;
    box-sizing: border-box;
    overflow: hidden;
    font-size: 16px;
    color: #111;
    font-weight: 700;
}


.operator_btn {
    margin-left: 18px;
    cursor: pointer;
}

.isright {
    text-align: right;
}

.active-right {
    background-color: #f93684;
    color: #fff;
}

.active-btn {
    color: #f93684;
}
</style>